<template>
  <view class="artwork-card" @click="handleClick">
    <!-- 作品图片 -->
    <view class="artwork-image-container">
      <image class="artwork-image" :src="artwork.resultUrl" mode="aspectFill"></image>
      
      <!-- 原图对比按钮 -->
      <view class="compare-btn" @click.stop="showCompare" v-if="showCompareBtn">
        <text class="compare-icon">⟷</text>
        <text class="compare-text">对比原图</text>
      </view>
      
      <!-- 标签展示 -->
      <view class="artwork-tags" v-if="showTags">
        <text 
          class="tag-item" 
          v-for="(tag, index) in ((artwork.tags && artwork.tags.length > 0) ? artwork.tags.slice(0, maxTags) : [])" 
          :key="index"
        >
          {{ tag }}
        </text>
        <!-- 如果没有标签，显示一个默认标签 -->
        <text 
          class="tag-item" 
          v-if="showTags && (!artwork.tags || artwork.tags.length === 0)"
        >
          作品
        </text>
      </view>
    </view>
    
    <!-- 作品信息 -->
    <view class="artwork-info" v-if="showInfo">
      <!-- 作品描述 -->
      <view class="artwork-desc" v-if="artwork.description && showDescription">
        {{ truncateText(artwork.description, descriptionLength) }}
      </view>
      
      <!-- 互动信息 -->
      <view class="artwork-stats" v-if="showStats">
        <view class="stat-item">
          <text class="iconfont icon-like" :class="{ active: artwork.isLiked }"></text>
          <text class="stat-count">{{ artwork.likeCount || 0 }}</text>
        </view>
        <view class="stat-item">
          <text class="iconfont icon-comment"></text>
          <text class="stat-count">{{ artwork.commentCount || 0 }}</text>
        </view>
        <view class="stat-item" v-if="showTime">
          <text class="iconfont icon-time"></text>
          <text class="stat-count">{{ formatTime(artwork.createTime) }}</text>
        </view>
      </view>
      
      <!-- 用户信息 -->
      <view class="artwork-user" v-if="showUser && artwork.user">
        <image class="user-avatar" :src="artwork.user.avatar" mode="aspectFill"></image>
        <text class="user-name">{{ artwork.user.nickname }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';

export default {
  name: 'ArtworkCard',
  
  props: {
    // 作品数据
    artwork: {
      type: Object,
      required: true
    },
    // 是否显示对比按钮
    showCompareBtn: {
      type: Boolean,
      default: true
    },
    // 是否显示标签
    showTags: {
      type: Boolean,
      default: true
    },
    // 最大显示标签数量
    maxTags: {
      type: Number,
      default: 2
    },
    // 是否显示信息区域
    showInfo: {
      type: Boolean,
      default: true
    },
    // 是否显示描述
    showDescription: {
      type: Boolean,
      default: true
    },
    // 描述文字长度限制
    descriptionLength: {
      type: Number,
      default: 50
    },
    // 是否显示统计信息
    showStats: {
      type: Boolean,
      default: true
    },
    // 是否显示时间
    showTime: {
      type: Boolean,
      default: false
    },
    // 是否显示用户信息
    showUser: {
      type: Boolean,
      default: false
    }
  },
  
  methods: {
    // 处理卡片点击
    handleClick() {
      this.$emit('click', this.artwork);
    },
    
    // 显示原图对比
    showCompare() {
      this.$emit('compare', this.artwork);
    },
    
    // 截断文本
    truncateText(text, length) {
      if (!text) return '';
      return text.length > length ? text.substring(0, length) + '...' : text;
    },
    
    // 格式化时间
    formatTime(time) {
      if (!time) return '';
      
      const now = dayjs();
      const artworkTime = dayjs(time);
      const diffMinutes = now.diff(artworkTime, 'minute');
      
      if (diffMinutes < 60) {
        return `${diffMinutes}分钟前`;
      } else if (diffMinutes < 24 * 60) {
        return `${Math.floor(diffMinutes / 60)}小时前`;
      } else if (diffMinutes < 30 * 24 * 60) {
        return `${Math.floor(diffMinutes / (24 * 60))}天前`;
      } else {
        return artworkTime.format('YYYY-MM-DD');
      }
    }
  }
}
</script>

<style scoped>
.artwork-card {
  width: 100%;
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
}

.artwork-image-container {
  position: relative;
  width: 100%;
}

.artwork-image {
  width: 100%;
  height: 500rpx;
  display: block;
}

.compare-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
}

.compare-icon {
  margin-right: 6rpx;
  font-size: 28rpx;
}

.artwork-tags {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  display: flex;
  flex-wrap: wrap;
}

.tag-item {
  font-size: 22rpx;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.artwork-info {
  padding: 20rpx;
}

.artwork-desc {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 15rpx;
}

.artwork-stats {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.stat-item {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.iconfont {
  font-size: 32rpx;
  color: #999;
  margin-right: 6rpx;
}

.iconfont.active {
  color: #FF69B4;
}

.stat-count {
  font-size: 24rpx;
  color: #999;
}

.artwork-user {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.user-name {
  font-size: 26rpx;
  color: #666;
}
</style>
